<template>
    <div>
        <BaseTable
            :id="'budgetDetailCustom'"
            :canAdd="true"
            :data.sync="data.budgetDetailCustom"
            :config="tableConfig"
            :showSummary="true"
            @popRow="len => !len && $root.$emit('uploadBtnDisabled', 'budgetDetailCustom', false)"
            @summary-change="summaryChange"
            :summaryColumn="['totalPrice']"
        ></BaseTable>
        <el-form :inline="true" :label-width="'160px'" :model="data">
            <el-form-item
                v-for="item in formList"
                :key="item.label"
                :style="`width:${item.block ? 100 : 40}%;`"
                :label="item.label"
                :prop="item.prop"
            >
                <div v-if="item.type === 'select'">
                    <el-select
                        v-model="data[item.prop]"
                        size="mini"
                        @change="val => item.change && item.change(val, item.options)"
                    >
                        <el-option
                            v-for="op in item.options"
                            :key="`${op.label}`"
                            :label="op.label"
                            :value="op.value"
                        ></el-option>
                    </el-select>
                    <span v-if="item.unit">{{ item.unit }}</span>
                </div>
                <el-input
                    v-else
                    disabled
                    v-model="data[item.prop]"
                    type="'text'"
                    :style="item.style || 'width:190px;'"
                    autocomplete="off"
                    :placeholder="item.label"
                    size="small"
                ></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import BudgetSupplement from './BudgetSupplement';
export default BudgetSupplement;
</script>

<style lang="less" scoped></style>
